<template>
    <div class="nopage">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
		    <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6" v-for="page in pagedata" :key="page.id">
                <router-link :to="'/shoy/reco/goodstjpage/'+page.id+'/'+page.goodsName+'/'+page.goodsPrice+'/'+page.pageImgurl">
		            <img :src="page.goodsImg" alt="11">
		            <div class="mui-media-body">{{ page.goodsName }}</div>
                    <div class="mui-media-body price">{{ page.goodsPrice }}</div>
                </router-link>
            </li>
		</ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            mkname:"",
            pagedata: [],
            pageImgurl: []
        }
    },
    props: ['pagesjn'],
    methods: {
        mounted() { //京东ui插件，操作失败弹窗
            this.$toast.fail('操作失败！');
        },
        getInfo(){
            //获取本地的JSON数据
            this.$http.get('http://localhost:8080/static/res/'+this.pagesjn+'.json').then(result => {
                this.pagedata = result.body
                //转换Json数据中的url地址
                this.pagedata.forEach(element => {
                    const pageImgurl = element.goodsImg.substr(9).replace(/\//g,'-')
                    element.pageImgurl = pageImgurl
                })

          },()=>{
              this.mounted();
          })
        }
    },
    created(){
        this.getInfo()
    },
}
</script>

<style scoped>
    .nopage, .mui-table-view{
        background-color: #ffffff;
    }
    .mui-media img{
        width: 100px;
        height: 100px;
    }
    .price {
        color: red !important;
    }
</style>
